import React from 'react'
import Progress from '../../../../components/afterLoan/Progress'
import { Rate, Form, Button, Space } from 'antd';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import RepaymentList from '../../../../components/afterLoan/RepaymentList';
import Information from '../../../../components/afterLoan/Infomation';
import UserTitle from '../../../../components/afterLoan/UserTitle';

const columns1 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '减免金额',
        dataIndex: 'credit_amount',
    },
    {
        title: '逾期天数',
        dataIndex: 'overdue_day',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '提交人',
        dataIndex: 'submit_person',
    },
    {
        title: '提交时间',
        dataIndex: 'submit_time',
    },
    {
        title: '还款备注',
        dataIndex: 'repayment_remark',
    },
    {
        title: '审核意见',
        dataIndex: 'audit_opinion',
    },
    {
        title: '审核人',
        dataIndex: 'audit_person',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
            </Space>
        )
    }
];

const data1 = [];
for (let i = 0; i < 3; i++) {
    data1.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        real_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        credit_amount: (0 / 100).toFixed(2),
        overdue_day: 0,
        status: '提交审批',
        submit_person: '操作人员A',
        submit_time: '2021-12-29',
        repayment_remark: '客户已转账',
        audit_opinion: '已核实',
        audit_person: '操作人员B'
    })
}

const customIcons = {
    1: <FrownOutlined style={{ fontSize: 50 }} />,
    2: <FrownOutlined style={{ fontSize: 50 }} />,
    3: <MehOutlined style={{ fontSize: 50 }} />,
    4: <SmileOutlined style={{ fontSize: 50 }} />,
    5: <SmileOutlined style={{ fontSize: 50 }} />,
};

export default function FinishCheck({ history, location }) {
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log('Received values of form: ', values);
    };
    return (
        <div className='finish-check'>
            <Progress title="办理贷款结项" goBack={history.goBack} isFinish={true} />
            <div className='grade' style={
                {
                    backgroundColor: '#fff',
                    padding: '0 10px',
                    marginBottom: '40px'
                }
            }>
                <div className='finish-title' style={{
                    height: 40,
                    lineHeight: '40px',
                    textAlign: 'center',
                    borderBottom: '1px solid #ccc'
                }}>结项信息</div>
                <Form
                    name="finish_form"
                    className="ant-advanced-search-form"
                    onFinish={onFinish}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 8,
                    }}
                    style={{
                        padding: '40px 0'
                    }}
                >
                    {location.state === 1 ? null : <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        可对该贷款进行评分，有利于用户在平台的信用等级评估
                    </Form.Item>}
                    <Form.Item label="评分" initialValue={5} name="grade">
                        <Rate character={({ index }) => customIcons[index + 1]} disabled={location.state === 1} />
                    </Form.Item>
                    <Form.Item label="结项描述" name="finish_description" initialValue={location.state === 1 ? '查询到的数据' : ''}>
                        <textarea placeholder='最多可输入两百字' cols="100" rows="3" disabled={location.state === 1}></textarea>
                    </Form.Item>
                    {location.state === 1 ? null :
                        <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                            <Button type="primary" htmlType="submit" size='default'>
                                提交
                            </Button>
                            <Button type="default" size='default' style={{ marginLeft: 100 }} onClick={() => {
                                history.goBack()
                            }}>
                                返回
                            </Button>
                        </Form.Item>}
                </Form>
            </div>
            <UserTitle type={"还款信息"} />
            <RepaymentList columns={columns1} data={data1} />
            <Information></Information>
        </div>
    )
}
